<script setup lang="ts">
import { ref } from "vue";
import CraneFly from "./CraneFly.vue";

const props = defineProps({
  pageView: {
    type: Number,
    default: 1,
  },
  isFlying: {
    type: Boolean,
    default: false,
  },
  craneColor: {
    type: String,
    default: "#e7ba81",
  },
});
const craneFlyRef = ref<InstanceType<typeof CraneFly>>();
const emits = defineEmits(["updateView", "showTextarea", "released"]);
const updateView = (view: number) => {
  emits("updateView", view);
};
const showTextarea = () => {
  emits("showTextarea");
};
const released = () => {
  emits("released");
};
</script>

<template>
  <InputPaper v-if="props.pageView === 0" @animationEnd="showTextarea()" />
  <PaperCrane
    v-if="props.pageView === 1"
    @animationEnd="updateView(2)"
    class="animated1s fadeOut"
  />
  <CraneFly
    v-if="props.pageView === 2"
    ref="craneFlyRef"
    class="animated1s fadeIn"
    :isFlying="props.isFlying"
    :craneColor="props.craneColor"
    @animationEnd="released()"
  />

  <!-- 控制器 -->
</template>
